<template>
  <view>
    <view>slot-test 共3条 红色</view>
    <slot-test>
      <view class="slot-test slot-test1">slot-test1</view>
    </slot-test>
    <slot-test>
      <view slot:default class="slot-test slot-test2">slot-test2</view>
    </slot-test>
    <slot-test>
      <template v-slot:default>
        <view class="slot-test slot-test3">slot-test3</view>
      </template>
    </slot-test>
    <view>slot-default-test 共3条 灰色</view>
    <slot-default-test>
      <view class="slot-default-test slot-default-test1">slot-default-test1</view>
    </slot-default-test>
    <slot-default-test>
      <view slot="default" class="slot-default-test slot-default-test2">slot-default-test2</view>
    </slot-default-test>
    <slot-default-test>
      <template v-slot:default>
        <view class="slot-default-test slot-default-test3">slot-default-test3</view>
      </template>
    </slot-default-test>
    <view>slot-named-test 共2条 橙色</view>
    <slot-named-test>
      <view slot="test" class="slot-named-test slot-named-test1">slot-named-test1</view>
    </slot-named-test>
    <slot-named-test>
      <template v-slot:test>
        <view class="slot-named-test slot-named-test2">slot-named-test2</view>
      </template>
    </slot-named-test>
    <view>slot-scope-test 共5条 蓝色</view>
    <view class="slot-scope-test">
      <slot-scope-test :text="'slot-scope-test1'">
        <template v-slot="{text}">
          <view class="slot-scope-test1">{{text}}</view>
        </template>
      </slot-scope-test>
      <slot-scope-test :text="'slot-scope-test2'">
        <template v-slot="{text}">
          <custom-view ext-class="slot-scope-test2" :text="text"></custom-view>
        </template>
      </slot-scope-test>
      <slot-scope-test>
        <view class="slot-scope-test3">slot-scope-test3</view>
      </slot-scope-test>
      <slot-scope-test>
        <view slot="default" class="slot-scope-test4">slot-scope-test4</view>
      </slot-scope-test>
      <slot-scope-test>
        <template v-slot:default>
          <view class="slot-scope-test5">slot-scope-test5</view>
        </template>
      </slot-scope-test>
    </view>
    <view>style-test 共1条 绿色</view>
    <style-test></style-test>
    <view>style-null-test 共1条 黑色</view>
    <style-null-test></style-null-test>
  </view>
</template>

<script>
import slotTest from './slot-test'
import slotDefaultTest from './slot-default-test'
import slotNamedTest from './slot-named-test'
import slotScopeTest from './slot-scope-test'
import styleTest from './style-test'
import styleNullTest from './style-null-test'

export default {
  components: {
    slotTest,
    slotDefaultTest,
    slotNamedTest,
    slotScopeTest,
    styleTest,
    styleNullTest
  },
  data () {
    return {
      data: {

      }
    }
  }
}
</script>

<style>
.slot-test {
  color: red;
}
.slot-default-test {
  color: gray;
}
.slot-named-test {
  color: orange;
}
.slot-scope-test {
  color: blue;
}
</style>